<template>
	<view>	
		<!-- 加载动画 -->
		<view class="loading-container" v-if="loading">
			<view class="loading-animation">
				<view class="loading-dot"></view>
				<view class="loading-dot"></view>
				<view class="loading-dot"></view>
			</view>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 空数据状态 -->
		<view class="empty-container" v-if="!loading && couponList.length === 0">
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text class="empty-text">暂无优惠券数据</text>
		</view>
		
		<!-- 优惠券列表 -->
		<view class="coupon_list" v-if="!loading && couponList.length > 0" >
			<view 
				class="coupon_item" 
				v-for="(item, index) in couponList" 
				:key="item.id"
				:class="{ 'fade-in': index < 5 }"
				@click="buyCoupon(item)"
			>
				<view class="coupon_left">
					<view class="logo">
						<image :src="'https:' + item.shopIconUrl" mode=""></image>
					</view>
					<view class="ifom">
						<view class="name">
						<view class="tex">{{item.title}}</view>
						 <view class="pup_tpye">满减券</view></view>
						<view class="dibs">
							<view class="price">
								<text>￥</text>
								{{item.price}}
							</view>
							<view class="yh">
							{{item.tags[0] == '满减券' ? `满 ${item.useThreshold} 元可用` : (item.tags[0] == '代金券' ? `${item.price}抵${item.couponValue}代金券` : '')}}</view>
						</view>
						<view class="period">
							有效期到：{{item.effectEnd}}
						</view>
						<!-- <view class="btn" @click="buyCoupon(item)">购买</view> -->
					</view>
				</view>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="hasMore">
				<view class="load-more-animation">
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
					<view class="loading-dot"></view>
				</view>
				<text class="load-more-text">加载更多...</text>
			</view>
			
			<!-- 没有更多数据 -->
			<view class="no-more" v-else>
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { couponCategory, couponpage } from '@/core/api/index.js'
	export default{
		data(){
			return{
				splist:[],
				isscorll:false,
				categoryId:'',
				current:0,
				couponList: [],
				loading: false,
				hasMore: true,
				page: 1,
				size: 20,
				tabTransition: 'slide'
			}
		},
		onLoad() {
			this.CouponCategory()
		},
		onReachBottom() {
			// 触底加载更多
			if (!this.loading && this.hasMore) {
				this.loadMoreCoupons()
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.refreshCoupons()
		},
		methods:{
			handleTabChange(index){
				this.current = index
				this.categoryId = this.splist[index].id
				this.refreshCoupons()
			},
			
			async CouponCategory(){
				this.loading = true
				try {
					const { data } = await couponCategory()
					this.splist = data
					if (data.length > 0) {
						this.categoryId = data[0].id
						this.refreshCoupons()
					} else {
						this.loading = false
					}
				} catch (error) {
					console.error('获取分类列表失败:', error)
					this.loading = false
				}
			},
			
			// 刷新优惠券列表
			async refreshCoupons() {
				this.page = 1
				this.hasMore = true
				this.couponList = []
				await this.fetchCoupons()
				uni.stopPullDownRefresh()
			},
			
			// 加载更多优惠券
			async loadMoreCoupons() {
				if (!this.hasMore || this.loading) return
				this.page++
				await this.fetchCoupons()
			},
			
			// 获取优惠券列表
			async fetchCoupons() {
				this.loading = true
				try {
					let params = {
						page: this.page,
						size: this.size,
						condition: {
							categoryId: this.categoryId,
							source:2
						}
					}
					
					const { data } = await couponpage(params)
					if (this.page === 1) {
						this.couponList = data.records || []
					} else {
						this.couponList = [...this.couponList, ...(data.records || [])]
					}
					
					// 判断是否还有更多数据
					this.hasMore = this.couponList.length < data.total
				} catch (error) {
					console.error('获取优惠券列表失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			// 购买优惠券
			buyCoupon(itme) {
				// 购买逻辑
				uni.navigateTo({
					url:'/pages/coupon/details?itme=' + encodeURIComponent(JSON.stringify(itme)) +'&type=1'
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
	
	/* 加载动画样式 */
	.loading-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.8);
		z-index: 200;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.loading-animation {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.loading-dot {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		background-color: #EF7B3A;
		margin: 0 10rpx;
		animation: loading 1.4s infinite ease-in-out both;
	}
	
	.loading-dot:nth-child(1) {
		animation-delay: -0.32s;
	}
	
	.loading-dot:nth-child(2) {
		animation-delay: -0.16s;
	}
	
	@keyframes loading {
		0%, 80%, 100% { transform: scale(0); }
		40% { transform: scale(1.0); }
	}
	
	.loading-text {
		color: #EF7B3A;
		font-size: 28rpx;
	}
	
	/* 空数据状态 */
	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-container image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
	
	/* 加载更多 */
	.load-more {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
	}
	
	.load-more-text {
		color: #999;
		font-size: 28rpx;
	}
	
	/* 没有更多数据 */
	.no-more {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 30rpx 0;
	}
	
	/* 优惠券列表动画 */
	.fade-in {
		animation: fadeIn 0.5s ease forwards;
		opacity: 0;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>

<style lang="scss">
	/* 选项卡样式优化 */
	.tag {
		height: 100rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 100;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}
	.coupon_list{
		padding: 0 30rpx;
		.coupon_item{
			margin-top: 30rpx;
			padding: 40rpx 30rpx;
			background-color: #fff;
			display: flex;
			position: relative;
			.coupon_left{
				display: flex;
				align-items: center;
				.logo{
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx;
					image{
						width: 100%;
						border-radius: 10rpx;
						height: 100%;
					}
				}
				.ifom{
					margin-left: 20rpx;
					.name{
						font-size: 30rpx;
						display: flex;
						font-weight: 700;
						width: fit-content;
						position: relative;
						justify-content: space-between;
						.tex{
							  white-space: nowrap;       /* 禁止文本换行 */
							  overflow: hidden;          /* 超出容器的部分隐藏 */
							  text-overflow: ellipsis;   /* 超出部分显示省略号 */
							  width: 240rpx;
						}
					}
					.pup_tpye{
						font-size: 20rpx;
						background-color: #FADFCF;
						color: #f98c50;
						// position: absolute;
						padding: 3rpx 15rpx;
						    top: 5%;
						    right: -77%;
							display: flex;
							align-items: center;
						margin-left: 10rpx;
						border-radius: 5rpx;
					}
					
					.dibs{
						display: flex;
						align-items: center;
						margin: 10rpx 0;
						.price{
							font-size: 42rpx;
							color: #EC691C;
							font-weight: 700;
							text{
								
								font-size: 30rpx;
							}
						}
						.yh{
							margin-left: 10rpx;
							color: #757575;
						}
					}
				}
			}
			.period{
				color: #999999;
				font-size: 24rpx;
			}
			.btn{
				background-color: #F26B2E;
				width: 108rpx;
				height: 48rpx;
				border-radius: 40rpx;
				text-align: center;
				line-height: 47rpx;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: 0%;
				transform: translate(-10%,-50%);
				top: 50%;
				margin-right: 20rpx;
			}
		}
	}
</style>